<template>
  <div id="order">
    <!-- 标题 -->
    <div class="column-name mb24">
      <h2 class="fl">{{title}}</h2>
    </div>

    <!-- 订单选项 -->
    <!-- <div class="plugs-select mb24">
      <select class="plugs-select-hd fl">
        <option v-for="value in select" :key="value.id" value="value.id">{{value.name}}</option>
      </select>
    </div>-->
      <div class="empty" v-if="items.length == 0" >
        <p class="mb36">这里面还是空的呢！去逛一逛？</p>
        <el-button type="primary" style="width:60%" @click="()=>{ this.$router.push('/')}">去逛逛</el-button>
      </div>
    <!-- 详细列表 -->
    <div class="goods-section" v-if="items.length > 0">
      <div class="goods-head">
        <div class="goods-list fl">
          <p class="fl">{{head}}</p>
        </div>
        <div class="goods-info fl" v-for="value in information" :key="value.id">
          <p>{{value.title}}</p>
        </div>
      </div>
      <div class="simplify-page"></div>
      <div class="goods-body" v-for="value in items" :key="value.id">
        <!-- 订单为空 -->
        <!-- <p class="empty">{{empty}}</p> -->
        <div class="goods-article">
          <div class="goods-head">
            <div class="order-info fl pl12">
              <p>
                <span class="order-time">{{value.create_date}}</span>
              </p>
            </div>
            <div class="goods-amount fl"></div>
          </div>
          <div class="goods-outer">
            <div class="goods-box fl">
              <div class="goods-head">
                <span class="order-number fl pl12">子订单号：{{value.id}}</span>
                <span class="order-shop fl">{{value.product_name}}</span>
              </div>
              <div class="goods-mod">
                <div class="goods-list fl">
                  <div class="goods-inner fl pl12">
                    <div class="goods-image">
                      <img :src="value.imgs.split(',')[0]" alt />
                    </div>
                  </div>
                  <div class="goods-more fl pl12">
                    <p>(共1件商品)</p>
                  </div>
                </div>
                <div class="goods-info fl">
                  <div class="goods-price">
                    ￥
                    <var>{{value.shop_price}}</var>
                  </div>
                </div>
                <div class="goods-info fl">
                  <div class="goods-status">{{value.show_status}}</div>
                </div>
              </div>
            </div>
              <!--待付款 -->
            <div v-if="value.status == 1 " class="goods-info fl" style="margin:75px 10px">
                <br>
              <el-link tag="a" @click="fukuan(value.id)">去付款</el-link>
              <el-link  @click="cancleOrder(value.id)" >取消订单</el-link>
            </div>
            <!-- 待发货 -->
            <div v-if="value.status == 2 " class="goods-info fl" style="margin:75px 10px">
              <br>
              <el-link tag="a" @click="refund(value.id)" >申请退款</el-link>
              <el-link tag="a" @click="detail(value.id)"  >订单详情</el-link>
            </div>
            <!-- 待收货 -->
            <div v-if="value.status == 3 " class="goods-info fl" style="margin:75px 10px">
              <br>
              <el-link tag="a" @click="detail(value.id)" >订单详情</el-link>
            </div>
            <!-- 待评价 -->
            <div v-if="value.status == 4" class="goods-info fl" style="margin:75px 10px">
              <br>
              <el-link tag="a"  @click="$router.push('/personal/evaluate')">去评价</el-link>
             <el-link tag="a" @click="detail(value.id)" >订单详情</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我的订单",
      // select: [
      //   { id: "0", name: "三个月内的订单" },
      //   { id: "1", name: "历史订单" }
      // ],
      head: "订单信息",
      information: [
        { title: "商品金额（元）" },
        { title: "状态" },
        { title: "操作" }
      ],
      empty: "暂无订单信息",
      items: [
      ]
    };
  },
  mounted(){
   this.init()
  },
  methods:{
    cancleOrder(val){
      this.$confirm('确定取消该订单吗？', '确认信息', {
          distinguishCancelAndClose: true,
          lockScroll:false,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(() => {
          this.$prompt('请输入取消原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /\S/,
              lockScroll:false,
              inputErrorMessage: '取消订单原因不能为空！'
            }).then(({ value }) => {
                this.axios.post("/order/cancle",{
                  "id": val,
                  "from":"buyer",
                  "reason":value
                }).then(resp=>{
                    if(resp.code == 0){
                      this.$message.success(resp.msg)
                      this.init()
                    }else{
                      this.$message.error(resp.msg)
                    }
                })
            }).catch(() => {    
            });
          }).catch(err=>{})
    },
    init(){
       this.axios.post("/order/orders").then((resp)=>{
        this.items = resp.data
    })
    },
    detail(val){
      this.$router.push({
        name:"OrderId",
        query: {
          id:val
        }
      })
    },
    fukuan(val){
      this.axios.post("/order/fukuan",{
        id:val
      }).then((resp)=>{
          var win = window.open("","_blank")
          win.document.write(resp.data)
      })
    },
    refund(val){
       this.$prompt('请输入退款原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          lockScroll:false,
          inputErrorMessage: '退款原因不能为空！'
        }).then(({ value }) => {
          this.axios.post("/refund/apply",{
            id:val,
            reason:this.reason
          }).then((resp)=>{
            if(resp.code==0){
               this.$message.success(resp.msg)
               this.init()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消退款操作！'
          });       
        });
    }
  }
};

</script>
<style scoped>
#order {
  margin: 0 auto;
  margin-top: 36px;
  width: 1080px;
}

/* 标题 */
.column-name {
  font-size: 18px;
  height: 22px;
  /* background-color: aquamarine; */
}

/* 订单选项 */
/* .plugs-select {
  height: 24px;
  background-color: blue;
}
.plugs-select .plugs-select-hd {
  position: relative;
  margin: 6px 10px;
  line-height: 22px;
} */

/* 详细列表 */
.goods-section .goods-head {
  height: 38px;
  border-bottom: 1px solid #ddd;
  line-height: 38px;
  color: #888;
  /* background-color: blueviolet; */
}
.goods-section .goods-list {
  /* height: 100%; */
  width: 576px;
  font-size: 0;
  /* background-color: beige; */
}
.goods-section .goods-info {
  /* height: 100%; */
  width: 168px;
  line-height: 30px;
  text-align: center;
  /* background-color: burlywood; */
}
.simplify-page {
  padding-bottom: 24px;
}
.goods-section .empty {
  text-align: center;
  padding: 100px;
  color: #777;
}

.goods-body {
  min-height: 220px;
  /* background-color: firebrick; */
}
.goods-section .goods-box .goods-head {
  border-bottom: 0;
  border-top: 1px dotted #d3d7d7;
  font-size: 12px;
  color: #333;
}
.goods-section .goods-box .goods-head:first-child {
  border-top: 0;
}
.goods-section .goods-article {
  margin-bottom: 36px;
}
.goods-section .goods-outer {
  font-size: 0;
  letter-spacing: -4px;
  border-bottom: 1px dotted #d3d7d7;
  overflow: hidden;
}
.goods-section .order-info,
.goods-section .order-amount {
  font-size: 12px;
  width: 40%;
}
.goods-section .order-amount {
  color: #333;
  text-align: right;
}
.order-info,
.order-info p,
.order-amount,
.goods-mod {
  overflow: hidden;
}
.order-time {
  float: left;
}
.goods-section .goods-box {
  display: inline-block;
}
.goods-section .goods-box,
.goods-section .goods-list,
.goods-section .goods-info,
.goods-section .goods-inner,
.goods-section .goods-image,
.goods-section .goods-more,
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last {
  position: relative;
  vertical-align: middle;
}
.goods-section .goods-box,
.goods-section .goods-list,
.goods-section .goods-info,
.goods-section .goods-inner,
.goods-section .goods-image,
.goods-section .goods-more,
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last {
  font-size: 12px;
  letter-spacing: normal;
}
.goods-section .goods-box {
  width: 856px;
  border-right: 1px dotted #d3d7d7;
  font-size: 0;
}
.goods-section .order-amount-box,
.goods-section .order-number {
  padding-right: 24px;
}
.goods-section .order-number {
  color: #333;
}

.goods-section .goods-mod {
  padding: 12px 0;
  font-size: 0;
  letter-spacing: -4px;
}
.goods-section .goods-inner {
  position: relative;
  z-index: 1;
  width: 144px;
}
.goods-section .goods-image {
  min-width: 132px;
}
.goods-image img {
  width: 100%;
}
.goods-section .goods-more {
  color: #888;
}
.goods-more,
.goods-mod .goods-info .goods-price,
.goods-mod .goods-info .goods-status {
  line-height: 147px;
}

.goods-section .goods-price {
  font-size: 14px;
  color: #29a3d6;
}

.goods-section .goods-info {
  width: 140px;
  line-height: 30px;
  text-align: center;
}
a {
  color: #638db4;
}
/* 内容 */
.empty {
  padding-top: 30%;
  text-align: center;
  padding-bottom:30%;
}
</style>
